<template>
  <div v-if="!appStore.navbar" class="fixed-settings" @click="setVisible">
    <a-button type="primary">
      <template #icon>
        <icon-settings />
      </template>
    </a-button>
  </div>
  <a-drawer
    :width="300"
    unmount-on-close
    :visible="visible"
    :cancel-text="$t('settings.close')"
    :ok-text="$t('settings.copySettings')"
    @ok="copySettings"
    @cancel="cancel"
  >
    <template #title>{{ $t("settings.title") }}</template>
    <Block :options="contentOpts" :title="$t('settings.content')" />
    <Block :options="othersOpts" :title="$t('settings.otherSettings')" />
    <a-alert>{{ $t("settings.alertContent") }}</a-alert>
  </a-drawer>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { Message } from "@arco-design/web-vue"
import { useI18n } from "vue-i18n"
import { useClipboard } from "@vueuse/core"
import { useAppStore } from "@/store"
import Block from "./block.vue"

const emit = defineEmits(["cancel"])

const appStore = useAppStore()
const { t } = useI18n()
const { copy } = useClipboard()
const visible = computed(() => appStore.globalSettings)
const contentOpts = computed(() => [
  { name: "settings.navbar", key: "navbar", defaultVal: appStore.navbar },
  {
    name: "settings.menu",
    key: "menu",
    defaultVal: appStore.menu
  },
  {
    name: "settings.topMenu",
    key: "topMenu",
    defaultVal: appStore.topMenu
  },
  { name: "settings.footer", key: "footer", defaultVal: appStore.footer },
  { name: "settings.tabBar", key: "tabBar", defaultVal: appStore.tabBar },
  {
    name: "settings.menuFromServer",
    key: "menuFromServer",
    defaultVal: appStore.menuFromServer
  },
  {
    name: "settings.menuWidth",
    key: "menuWidth",
    defaultVal: appStore.menuWidth,
    type: "number"
  }
])
const othersOpts = computed(() => [
  {
    name: "settings.colorWeak",
    key: "colorWeak",
    defaultVal: appStore.colorWeak
  }
])

const cancel = () => {
  appStore.updateSettings({ globalSettings: false })
  emit("cancel")
}
const copySettings = async () => {
  const text = JSON.stringify(appStore.$state, null, 2)
  await copy(text)
  Message.success(t("settings.copySettings.message"))
}
const setVisible = () => {
  appStore.updateSettings({ globalSettings: true })
}
</script>

<style scoped lang="less">
.fixed-settings {
  position: fixed;
  top: 280px;
  right: 0;

  svg {
    font-size: 18px;
    vertical-align: -4px;
  }
}
</style>
